<template>
    <div id="collections">
      <BackHeader :header="Header"></BackHeader>
      <div class="mt40">
        <mt-tab-container>
          <div class="row bg2" v-if="have">
            <div class="col-6 mt10" v-for="(item,index) in collectionsData" :key="index">
              <div class="card" style="height:155px;width:155px" >
                <img :src="item.imgs" class="card-img-top" alt="Card image cap" height="90px" @click="mainmsg1(index)">
                  <h6 class="card-title lue_2 title1 text-center">{{item.title}}</h6>
                <mt-button style="height:30px;" size="small" type="danger" @click="Dcollect(index)">取消</mt-button>
              </div>
            </div>
          </div>
          <div class="row bg2" v-if="!have">
            <div class="ptext">你没有收藏喔！</div>
          </div>
        </mt-tab-container>
      </div>
    </div>
</template>
<script>
import BackHeader from "../../components/Header/BackHeader.vue";
import CommonProvider from "@/providers/CommonProvider";
import MemberCenterProvider from "@/providers/MemberCenterProvider";
import { Toast } from "mint-ui";
export default {
  name: "collections",
  data() {
    return {
      Header: "我的收藏",
      collectionsData: [],
      have: false
    };
  },
  components: {
    BackHeader
  },
  mounted() {
    this.init()
  },
  methods: {
    mainmsg1(index) {
      window.localStorage.setItem("main_ID", this.collectionsData[index].id);
      this.$router.push("/details");
    },
    init(){
       MemberCenterProvider.checkLogin().then(res=>{
         let data = {
           data: res.data.userName
          }
         CommonProvider.cList(data).then(res => {
           this.collectionsData = res.data
           if(this.collectionsData.length > 0){
             this.have = true
           } else {
             this.have = false
           }
         })
       })
      
    },
    //取消收藏
    Dcollect(index) {
      let data3 = {
        id: this.collectionsData[index].id
      };
      CommonProvider.Dcollect(data3).then(res => {
        (this.open = true), Toast("取消收藏成功！");
        this.init()
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.ptext{
  margin: 30px;
}
</style>
